<template>
  <div>
    <van-nav-bar
      title="编辑昵称"
      right-text="完成"
      left-arrow
      @click-left="$emit('close')"
      @click-right="onUserName"
    />
    <van-field
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="15"
      placeholder="请输入新昵称"
      show-word-limit
    />
  </div>
</template>

<script>
import { modifyUserData } from '@/api/user.js'

export default {
  name: 'UserNamePopup',
  data() {
    return {
      message: this.value // 输入昵称
    }
  },
  props: {
    value: {
      type: [Number, String],
      required: true
    }
  },
  methods: {
    async onUserName() {
      this.$toast.loading({
        message: '修改中...', // 提示词
        forbidClick: true,
        duration: 0 // 持续时间 当前一直持续
      })

      try {
        await modifyUserData({
          name: this.message // 用户输入的新昵称
        })
        this.$toast.success('修改成功')

        this.$emit('close') // 弹出层关闭
        this.$emit('name', this.message) // 修改父组件的文本
      } catch (error) {
        console.log(error)
        this.$toast.fail('修改昵称失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #fff;
  .van-nav-bar__title {
    color: black;
  }
  .van-icon-arrow-left {
    color: #1989fa !important;
  }
}
.van-field {
  margin-top: 20px;
}
</style>
